<template>
  <div class="password-page">
    <!-- 顶部标题栏 -->
      <Header/>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="password-form">
        <div class="form-content">
          <div class="form-item">
            <label>输入旧密码：</label>
            <el-input 
              v-model="passwordForm.oldPassword" 
              type="password" 
              show-password
              placeholder="请输入旧密码"
            />
          </div>

          <div class="form-item">
            <label>设置新密码：</label>
            <el-input 
              v-model="passwordForm.newPassword" 
              type="password" 
              show-password
              placeholder="请输入新密码"
            />
          </div>

          <div class="form-item">
            <label>确认新密码：</label>
            <el-input 
              v-model="passwordForm.confirmPassword" 
              type="password" 
              show-password
              placeholder="请再次输入新密码"
            />
          </div>

          <!-- 底部按钮 -->
          <div class="form-actions">
            <el-button type="primary" @click="handleBack">返回</el-button>
            <el-button type="primary" @click="handleConfirm" style="width: 72%;">确认更改</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from '@/components/header.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { updatePassword } from '@/api/super'
import { useAdminStore } from '@/stores/admin'
import { useTokenStore } from '@/stores/token'

const router = useRouter()
const adminStore = useAdminStore()
const tokenStore = useTokenStore()

// 密码表单数据
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 返回处理
const handleBack = () => {
  router.back()
}

// 确认修改密码
const handleConfirm = async () => {
  // 表单验证
  if (!passwordForm.value.oldPassword) {
    ElMessage.error('请输入旧密码')
    return
  }
  if (!passwordForm.value.newPassword) {
    ElMessage.error('请输入新密码')
    return
  }
  if (!passwordForm.value.confirmPassword) {
    ElMessage.error('请确认新密码')
    return
  }
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致')
    return
  }
  if (passwordForm.value.oldPassword !== adminStore.adminInfo?.password) {
    ElMessage.error('原密码不对！')
    return
  }

  // 获取当前管理员ID
  const aid = adminStore.adminInfo?.aid
  if (!aid) {
    ElMessage.error('获取管理员信息失败')
    return
  }

  try {
    // 调用API修改密码
    await updatePassword(aid, passwordForm.value.newPassword)
    ElMessage.success('密码修改成功')

    // 清空输入框
    passwordForm.value.oldPassword = ''
    passwordForm.value.newPassword = ''
    passwordForm.value.confirmPassword = ''
    
    // 清除登录状态并跳转
    adminStore.setAdminInfo(null)  // 使用 setAdminInfo(null) 来清除管理员信息
    tokenStore.removeToken()
    
    // 提示用户重新登录并跳转到登录页
    ElMessage.info('请重新登录')
    router.push('/login')
    
  } catch (error) {
    ElMessage.error('密码修改失败')
  }
}


</script>

<style scoped>
@import '@/assets/css/repsw.css';
</style> 